<template>
  <div class="videoBox">
    <video src="../../assets/video/CLEANROOM (loop).mp4" autoplay muted loop ></video>
     <!-- <h1 class="h1">微信登录系统</h1> -->
      <div class="elBox"> 
        
      <el-form
        :model=loginForm
        status-icon
        :rules="rules"
        ref=loginForm
        label-width="100px"
        class="demo-ruleForm"
      >
       <h1 class="h1">微信登录系统</h1>
       <div class="imgbox"><img src="../../assets/pic/pic.png" alt=""></div>
      <commomlogin @syncLoginForm='handleSyncLoginForm'/> 
      </el-form>
    </div> 
  </div>
</template>

<script>
import commomlogin from "./commonlogin.vue"
import Qrlogin from './qrlogin.vue';
import Smslogin from './smslogin.vue';
export default {
  data() {
    // 校验验证码
    var validateCaptcha = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("验证码错误"));
      }
    };
    // 校验用户名
    var validateUsername = (rule, value, callback) => {
      var uPattern = /^[a-zA-Z0-9_-]{3,16}$/;
      if (uPattern.test(value)) {
        callback();
      } else {
        callback("3-16字母下划线");
      }
    };
    // 校验密码
    var validatePassword = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请正确输入密码"));
      } else {
        callback();
      }
    };
    return {
      loginForm:{
        username: "",
        password: "",
        captcha: "",
      },

      rules: {
        username: [{ validator: validateUsername, trigger: "blur" }],
        password: [{ validator: validatePassword, trigger: "blur" }],
        captcha: [{ validator: validateCaptcha, trigger: "blur" }],
      },
    };
  },
  methods: {
    handleSyncLoginForm(newLoginForm){
       console.log(newLoginForm)
    }
    ,submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
  components: {
    commomlogin,
    Qrlogin,
    Smslogin
  }
};
</script>

<style lang="less">
*{
  margin:0;
  padding: 0;
}
.el-input {
  .el-input__inner {
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    box-sizing: border-box;
    color: black;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 10px;
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 250px;
    margin-left: -30px;

  }
}

.videoBox video {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  min-height: 800px;
}
.elBox .h1{
  width: 400px;
  text-align: center;
  font-size: 36px;
  color:rgba(0, 0, 0, 0.605);
}
.elBox{
  width:400px;
  height:550px;
  background:#7676b06e;
  // border: 2px solid white;
  border-radius: 20px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  right: 100px;
  top: 100px;

}
.el-button{
  display: inline-block;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    background: rgba(166, 6, 83, 0.412);
    border: 1px solid #dcdfe6;
    color: white;
    -webkit-appearance: none;
    text-align: center;
    box-sizing: border-box;
    outline: 0;
    margin: 0;
    transition: .1s;
    font-weight: 500;
    padding: 12px 20px;
    font-size: 14px;
    border-radius: 4px;
    width: 250px;
    margin-left: -30px;
}
.el-form-item__label{
color:black;
font-weight: 900;
}
.imgbox img{
  position: absolute;
  top: 0;
  right: 0;
}
.sms{
  width: 250px;
 text-align: center;

}

// element.style {
//     width: 100px;
// }

</style>
